<template>
  <div class="add-type flex-boxs flex-align-x-c flex-align-y-c">
      <div class="main">
          <div class="head">新增类型</div>
          <div class="body"><input type="text" v-model="typeName" /></div>
          <div class="foot flex-boxs flex-align-x-sb">
              <input type="button" class="bm-btn-5 normal" value="确定" @click="feedback(true)" />
              <input type="button" class="bm-btn-2 normal" value="取消" @click="feedback(false)" />
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            typeName: null
        }
    },
    methods: {
        feedback (is) {
            this.$emit('result', is, this.typeName)
        }
    }
}
</script>

<style lang="less" scope>
@import '../assets/style/base/b-gether-var.less';
.add-type{position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.8);
    .main{flex:0 0 80%; border-radius:@2px; background:#fff;
        .head{height:@35px; padding:0 @15px; line-height:@35px; font-size:@12px; color:#fff; background:@color;}
        .body{padding:@15px;
            input{width:100%; height:@40px; line-height:@40px; border-color:@grey-01;}
        }
        .foot{padding:@5px @15px @15px @15px;
            input{flex:0 0 30%; height:@30px; line-height:@30px;}
        }
    }
}
</style>
